<template>
    <div class="root">
        <header>
            <router-link to="/userManagement">用户管理</router-link>
            <span class="color-fff">管理员</span>
        </header>

        <main>
            <p class="case-title color-fff">-- 查询条件 --</p>
            <div class="case-options">
                <div class="case-colum">
                    <label class="case-option">
                        <span class="color-fff">日期：</span>
                        <DataRangePicker
                            size="small"
                            @change="onDatePickerChange"
                        />
                    </label>
                    <label class="case-option">
                        <span class="color-fff">类型：</span>
                        <Select size="small" value="员工">
                            <Option value="访客">访客</Option>
                            <Option value="员工">员工</Option>
                        </Select>
                    </label>
                </div>
                <div class="case-colum">
                    <label class="case-option">
                        <span class="color-fff">姓名：</span>
                        <Input size="small" />
                    </label>
                    <label class="case-option">
                        <span class="color-fff">电话：</span>
                        <Input size="small" />
                    </label>
                    <label class="case-option">
                        <span class="color-fff">身份证号：</span>
                        <Input size="small" />
                    </label>
                    <label class="case-option">
                        <span class="color-fff">性别：</span>
                        <Select size="small" value="男">
                            <Option value="男">男</Option>
                            <Option value="女">女</Option>
                        </Select>
                    </label>
                    <Button size="small">查询</Button>
                    <router-link class="nearly-seven-day" to="/nearlySevenDays">
                        近7日访客统计图
                    </router-link>
                </div>
            </div>
            <p class="statistics color-fff">
                <label class="statistics-item">
                    <span>统计值(次数)：</span>
                    <span class="value">37</span>
                    <span>次</span>
                </label>
                <label class="statistics-item">
                    <span class="value">28</span>
                    <span>人</span>
                </label>
            </p>

            <Table
                class="ant-table"
                :columns="columns"
                bordered
                rowKey="sn"
                size="middle"
                :data-source="dataSource"
                :scroll="{ y: 520 }"
            >
            </Table>
        </main>
    </div>
</template>

<script>
    import {
        DatePicker,
        Select,
        Input,
        Button,
        Popconfirm,
        Table,
    } from "ant-design-vue";
    import { ref } from "vue";

    export default {
        components: {
            DataRangePicker: DatePicker.RangePicker,
            Select,
            Option: Select.Option,
            Input,
            Button,
            Popconfirm,
            Table,
        },
        setup() {
            const dataSource = [];
            for (let sn = 0; sn < 100; sn++) {
                dataSource.push({
                    sn,
                    name: `撒打算的 ${sn}`,
                    tel: "12345678910",
                    idNumber: "123456789123456789",
                    gender: "男",
                    reason: "12312321",
                    contact: "123213",
                    collectionAvatar: "查看",
                    accessControlAvatar: "查看",
                    isCheck: "成功",
                    visitingTime: "2020-10-21 16:04:59",
                    type: "访客",
                });
            }

            const columns = [
                {
                    title: "序号",
                    dataIndex: "sn",
                    align: "center",
                },
                {
                    title: "姓名",
                    dataIndex: "name",
                    align: "center",
                },
                {
                    title: "电话",
                    dataIndex: "tel",
                    align: "center",
                },
                {
                    title: "身份证号",
                    width: "12%",
                    dataIndex: "idNumber",
                    align: "center",
                },
                {
                    title: "性别",
                    dataIndex: "gender",
                    align: "center",
                },
                {
                    title: "来访事由",
                    dataIndex: "reason",
                    width: "20%",
                    align: "center",
                },
                {
                    title: "来访联系人",
                    dataIndex: "contact",
                    align: "center",
                },
                {
                    title: "采集头像",
                    dataIndex: "collectionAvatar",
                    align: "center",
                },
                {
                    title: "门禁头像",
                    dataIndex: "accessControlAvatar",
                    align: "center",
                },
                {
                    title: "核对成功",
                    dataIndex: "isCheck",
                    align: "center",
                },
                {
                    title: "来访时间(门禁)",
                    dataIndex: "visitingTime",
                    width: "10%",
                    align: "center",
                },
                {
                    title: "类型",
                    dataIndex: "type",
                    align: "center",
                },
            ];

            const onDatePickerChange = (date, dateString) => {
                console.log(dateString);
            };
            const onCellChange = (key, dataIndex, value) => {
                const dataSource = [...this.dataSource];
                const target = dataSource.find((item) => item.key === key);
                if (target) {
                    target[dataIndex] = value;
                    this.dataSource = dataSource;
                }
            };

            return {
                dataSource,
                columns,
                onDatePickerChange,
            };
        },
    };
</script>

<style lang="scss" scoped>
    .ant-table {
        border-radius: 8px;
        padding: 10px 10px 0;
    }
    .root {
        > header {
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: flex-end;
            a,
            span {
                line-height: 26px;
                margin-right: 30px;
            }
        }
        > main {
            margin: 15px;
            > .case-title {
                margin: 0;
            }
            > .case-options {
                display: flex;
                flex-direction: column;
                > .case-colum {
                    display: flex;
                    align-items: center;
                    > .case-option {
                        display: flex;
                        align-items: center;
                        margin: 9px 18px;
                        height: auto;
                        > input {
                            width: auto;
                        }
                    }
                    > .nearly-seven-day {
                        margin-left: 30px;
                    }
                }
            }
            > .statistics {
                padding: 10px;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                > .statistics-item {
                    margin-right: 30px;
                    > .value {
                        font-size: 22px;
                        margin: 0 6px;
                        font-weight: 600;
                    }
                }
            }
        }
    }
</style>